<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM2 鼠标事件</title>
</head>
<body>
	<h1>DOM2 鼠标事件</h1>
	<h5>在文档的任意位置按下鼠标</h5>
	<form id="mouseform" name="mouseform" action="#" method="get">
		ALT 键<input id="altkey" type="text"><br>
		Control 键<input id="controlkey" type="text"><br>
		Shift 键<input id="shiftkey" type="text"><br>
		在浏览器中的按键位置:<input id="clientx" type="text" size="5"><input id="clienty" type="text" size="5"><br>
		在屏幕上的按键位置:<input id="screenx" type="text" size="5"><input id="screeny" type="text" size="5"><br>
		使用的按键:<input id="buttonused" type="text" size="5"><br><br>
	</form>
	<script type="text/javascript">
		//altKey,ctrlKey,shiftKey中K字母大写.screenX,screenY,clientX,clientY中X,Y 大写
		function showMouseDetails(event) {
			var theForm = document.mouseform;
			theForm.altkey.value = event.altKey;
			theForm.controlkey.value = event.ctrlKey;
			theForm.shiftkey.value = event.shiftKey;
			
			theForm.clientx.value = event.clientX;
			theForm.clienty.value = event.clientY;
			
			theForm.screenx.value = event.screenX;
			theForm.screeny.value = event.screenY;
			//0左键,1中键,2右键
			if(event.button == 0) {
				theForm.buttonused.value = "left";
			} else if(event.button == 1) {
				theForm.buttonused.value = "middle";
			} else {
				theForm.buttonused.value = "right";
			}			
		}
		document.addEventListener('click', showMouseDetails, true);
	</script>
</body>
</html>